
import { CodepenOutlined, CodeSandboxOutlined, ControlOutlined, DropboxOutlined, ToolOutlined } from '@ant-design/icons'
import Three from "components/Three";
import React from "react";
import styles from './index.module.less'
import Foot from './ui/Foot'
import Controller from 'Controller';
import { Tabs, Tooltip } from "antd";
import PanelGraphicsWarehouse from './ui/PanelGraphicsWarehouse';
import PanelSceneElement from './ui/PanelSceneElement';
import PanelMouseTool from './ui/PanelMouseTool';

const { TabPane } = Tabs;

export default function Home() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const tabPane = React.useMemo(() => {
        return [
            {
                title: '鼠标工具',
                icon: <ToolOutlined />,
                component: <PanelMouseTool />,
            },{
                title: "场景元件",
                icon: <CodeSandboxOutlined />,
                component: <PanelSceneElement />
            },{
                title: "元素仓库",
                icon: <CodepenOutlined />,
                component: <PanelGraphicsWarehouse />
            },{
                title: "模型仓库",
                icon: <DropboxOutlined />,
                component: '模型仓库'
            },{
                title: '场景参数',
                icon: <ControlOutlined />,
                component: "场景参数",
            },
        ]
    }, [])

    const onResize = React.useCallback(() => {
        threeController.updateRendererSize()
    }, [threeController])

    React.useEffect(() => {
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener('resize', onResize)
        }
    }, [onResize])

    return (
        <div className={styles.home} >
            <div className={styles.body} >
                <div className={styles.cont} >
                    <Three controller={threeController} />
                </div>
                <TabsPanel>
                    {tabPane.map((e, i) => {
                        return (
                            <TabPane
                                key={`${i}`}
                                tab={
                                    <Tooltip placement="left" title={e.title}>
                                        {e.icon}
                                    </Tooltip>
                                }
                            >
                                {e.component}
                            </TabPane>
                        )
                    })}
                </TabsPanel>
            </div>
            <div className={styles.foot} >
                <Foot />
            </div>
        </div>
    )
}


function TabsPanel(props: { children: React.ReactNode }) {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const [activeKey, setActiveKey] = React.useState('');

    const onTabClick = React.useCallback((e: string) => {
        threeController.updateRendererSize()
        if (e !== activeKey) {
            setActiveKey(e);
        } else {
            setActiveKey('');
        }
    }, [activeKey, threeController])

    return (
        <div className={styles.panel} style={{ width: activeKey ? 360 : 41 }} >
            <Tabs
                size="small"
                type="card"
                tabPosition="left"
                className={styles.tabs}
                activeKey={activeKey}
                onTabClick={onTabClick}
            >
                {props.children}
            </Tabs>
        </div>
    )
}

